<template>
  <div>
    <group label-width="4.5em" label-margin-right="2em" label-align="right" id="mygroup">
      <cell title="详情" value="有啥可说的" is-link value-align="left"></cell>
      <x-input title="上报人" v-model="value1"></x-input>
      <datetime title="时&emsp;&emsp;&nbsp;间" v-model="time1" value-text-align="left" id="datetime"></datetime>
      <selector title="爱好" :options="['足球', '篮球','棒球','其他']" v-model="value2"></selector>
      <x-input title="学校" placeholder="必填" v-model="value3"></x-input>
      <x-input title="密码" type="password" placeholder="必填" v-model="value4"></x-input>
      <popup-picker title="请选择" placeholder="请选择类别代号" :data="list" v-model="value6" value-text-align="left"></popup-picker>
      <x-address title="地址选择" v-model="addressValue" raw-value :list="addressData" value-text-align="left"></x-address>
      <x-textarea title="详细信息" placeholder="请填写详细信息" :show-counter="false" :rows="3"></x-textarea>
    </group>
  </div>
</template>
<style lang="less">
@size:0.48rem;
#mygroup .weui-cells {
	font-size: 0.48rem;
	margin-top: 0;
}
.dp-container .dp-header .dp-item{
	font-size:@size;
}
.scroller-content .scroller-item {
	font-size: @size;
}
.vux-popup-picker-container .vux-popup-picker-header{
	font-size: @size;
}
</style>
<script>
  import { Group, Cell, XInput, Selector, PopupPicker, Datetime, ChinaAddressData, XAddress, XTextarea} from 'vux'
  export default {
    components: {
      Group,
      Cell,
      XInput,
      Selector,
      PopupPicker,
      XAddress,
      Datetime,
      XTextarea
    },
    data () {
      return {
        addressData: ChinaAddressData,
        addressValue: ['广东省', '深圳市', '南山区'],
        value1: '小vv',
        value2: '工艺技术',
        value3: '',
        value7: '',
        value8: '',
        value4: '',
        time1: '2017-06-01',
        value5: ['A'],
        value6: [],
        list: [['A', 'B', 'C']],
        numberValue: 0
      }
    }
  }
</script>